<template>
  <div>
    <simple-data-dialog
      :title="dialogTitle"
      :visible.sync="visible"
      :size="size"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="dialogRule"
        label-position="top"
        :inline="true"
      >
        <template v-for="(item,index) in dialogData">
          <el-form-item
            v-show="item.hidden?false:true"
            :key="index"
            :label="item.label"
            :required="item.required"
            :style="{width:item.fullWidth ? '100%':'50%'}"
            :prop="item.key"
          >
            <span v-if="item.type== &quot;null&quot; " />
            <!-- 输入框 -->
            <el-input
              v-if="item.type === 'input'"
              v-model="form[item.key]"
              :placeholder="$t('common.enter')+item.label"
              :disabled="item.disabled"
              :maxlength="item.maxLength?item.maxLength:''"
              clearable
            />
            <!-- 选择器 -->
            <el-select
              v-if="item.type === 'select'"
              v-model="form[item.key]"
              :placeholder="$t('common.select')+item.label"
              :disabled="item.disabled"
            >
              <el-option
                v-for="(option, index1) in item.options"
                :key="index1"
                :label="item.optionLabel?option[item.optionLabel]:option"
                :value="item.optionLabel?option[item.optionValue]:option"
              />
            </el-select>
            <!-- 多选 -->
            <el-select
              v-if="item.type === 'multiple'"
              v-model="form[item.key]"
              :placeholder="$t('common.select')+item.label"
              :disabled="item.disabled"
              multiple
              @change="chooseMultiple($event, item.key, item.options)"
            >
              <el-option
                label="全选"
                value="all"
              />
              <el-option
                v-for="(option, index1) in item.options"
                :key="index1"
                :label="item.optionLabel?option[item.optionLabel]:option"
                :value="item.optionLabel?option[item.optionValue]:option"
              />
            </el-select>
            <!-- 日期 -->
            <el-date-picker
              v-if="item.type === 'date'"
              v-model="form[item.key]"
              :placeholder="$t('common.select')+item.label"
              :disabled="item.disabled"
              :value-format="item.valueFormat"
            />
            <!-- 文本框 -->
            <el-input
              v-if="item.type === 'textarea'"
              v-model="form[item.key]"
              type="textarea"
              :rows="item.row?item.row:2"
              :placeholder="$t('common.enter')+item.label"
            />
            <!-- 单选框 -->
            <el-radio-group
              v-if="item.type === 'radio'"
              v-model="form[item.key]"
              :disabled="item.disabled"
            >
              <el-radio
                v-for="(option,index) in item.options"
                :key="index"
                :label="option.value"
              >{{ option.label }}</el-radio>
            </el-radio-group>
            <!-- switch -->
            <el-switch
              v-if="item.type==='switch'"
              v-model="form[item.key]"
              active-value="1"
              inactive-value="0"
              :disabled="item.disabled"
            />
            <!-- 上传图片 -->
            <upload
              v-if="item.type==='upload'"
              v-model="form[item.key]"
              :value="form[item.key]"
              :param="item.param"
              @return="showImg($event,item.key)"
            />
          </el-form-item>
        </template>
      </el-form>
      <div
        slot="footer"
        class="dialog_btn"
      >
        <el-button @click="visible=false">{{ $t('common.cancel') }}</el-button>
        <!-- <el-button @click="reset()">{{$t('common.reset')}}</el-button> -->
        <el-button
          type="primary"
          @click="confirm"
        >{{ $t('common.ok') }}</el-button>
      </div>
    </simple-data-dialog>
  </div>

</template>
<script>
import upload from '@/components/DataDialog/upload'
import SimpleDataDialog from '@/components/SimpleDataDialog'
export default {
  name: 'DataDialog',
  components: { upload, SimpleDataDialog },
  props: {
    dialogVisible: Boolean, // 显示
    dialogTitle: String, // 标题
    dialogData: Array,
    dialogRule: Object,
    width: [String, Number],
    confirmFunc: Function,
    size: {
      type: String,
      default: 'small',
      validator: value => ['small', 'middle', 'big', 'large'].indexOf(value) > -1
    }
  },
  data() {
    return {
      visible: false,
      form: {}
    }
  },
  watch: {
    dialogVisible(val) {
      this.visible = val
      if (val) {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate()
        })
      }
    },
    visible(val) {
      this.visibleHasChanged(val)
    }
  },
  mounted() {
    this.reset()
  },
  methods: {
    visibleHasChanged(val) {
      this.$emit('update:dialogVisible', val)
    },
    // 重置
    reset() {
      this.visible = this.dialogVisible
      this.dialogData.forEach(ele => {
        this.form[ele.key] = ''
      })
    },
    // 全选
    chooseMultiple(value, key, options) {
      if (value.includes('all')) {
        this.form[key] = options.map(option => option.value)
        this.$forceUpdate()
      }
    },
    showImg(url, key) {
      this.form[key] = url
    },
    // 确定
    confirm() {
      if (this.confirmFunc) {
        if (this.dialogRule) {
          this.$refs.form.validate(valid => {
            if (valid) {
              this.confirmFunc(this.form)
            }
          })
        }
      }
    }
  }

}
</script>
<style lang="scss" scoped>
</style>
